<!DOCTYPE html>
<html>
<head>
    <title>Circular Motion Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style and parameters
        const cx = 250;
        const cy = 320;
        const alpha_deg = 65;
        const alpha_rad = alpha_deg * Math.PI / 180;
        const cos_a = Math.cos(alpha_rad);
        const sin_a = Math.sin(alpha_rad);

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;

        // 1. Draw Ground
        ctx.beginPath();
        ctx.moveTo(40, cy);
        ctx.lineTo(460, cy);
        ctx.stroke();

        // 2. Draw Rotation Axis (vertical dashed line)
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx, 80);
        ctx.stroke();
        ctx.restore();

        // 3. Draw the inclined Rod (double line)
        const rod_length = 280;
        const rod_end_x = cx + rod_length * cos_a;
        const rod_end_y = cy - rod_length * sin_a;
        const rod_half_thickness = 1.5;

        ctx.beginPath();
        // Line 1
        ctx.moveTo(cx - rod_half_thickness * sin_a, cy + rod_half_thickness * cos_a);
        ctx.lineTo(rod_end_x - rod_half_thickness * sin_a, rod_end_y + rod_half_thickness * cos_a);
        // Line 2
        ctx.moveTo(cx + rod_half_thickness * sin_a, cy - rod_half_thickness * cos_a);
        ctx.lineTo(rod_end_x + rod_half_thickness * sin_a, rod_end_y - rod_half_thickness * cos_a);
        ctx.stroke();

        // 4. Draw the Ring (mass m)
        const dist_on_rod = 160;
        const ring_x = cx + dist_on_rod * cos_a;
        const ring_y = cy - dist_on_rod * sin_a;
        const ring_radius = 8;

        ctx.beginPath();
        ctx.arc(ring_x, ring_y, ring_radius, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();
        
        ctx.fillStyle = 'black';
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('m', ring_x + 18, ring_y + 6);
        ctx.fillText('μ', rod_end_x - 15, rod_end_y + 40);

        // 5. Draw the Circular Path (dashed ellipse)
        const path_radius_x = ring_x - cx;
        const path_radius_y = path_radius_x * 0.35; // Perspective factor
        
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.ellipse(cx, ring_y, path_radius_x, path_radius_y, 0, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.restore();

        // 6. Draw the angle α
        const arc_radius = 45;
        ctx.beginPath();
        ctx.arc(cx, cy, arc_radius, 0, -alpha_rad, true); // true for counter-clockwise in math sense
        ctx.stroke();
        
        ctx.font = 'italic 20px Times New Roman';
        const alpha_label_x = cx + arc_radius * 1.2 * Math.cos(-alpha_rad / 2.5);
        const alpha_label_y = cy + arc_radius * 1.2 * Math.sin(-alpha_rad / 2.5);
        ctx.fillText('α', alpha_label_x, alpha_label_y + 5);

        // 7. Draw angular velocity ω arrow
        ctx.font = 'italic 22px Times New Roman';
        const omega_label_x = cx - path_radius_x * 0.7;
        const omega_label_y = ring_y - path_radius_y - 30;
        ctx.fillText('ω', omega_label_x, omega_label_y);

        const arrow_start_x = omega_label_x + 25;
        const arrow_start_y = omega_label_y + 5;
        const arrow_end_x = arrow_start_x - 35;
        const arrow_end_y = arrow_start_y - 5;
        const arrow_ctrl_x = arrow_start_x - 18;
        const arrow_ctrl_y = arrow_start_y - 18;
        
        ctx.beginPath();
        ctx.moveTo(arrow_start_x, arrow_start_y);
        ctx.quadraticCurveTo(arrow_ctrl_x, arrow_ctrl_y, arrow_end_x, arrow_end_y);
        ctx.stroke();

        // Arrowhead
        const tangent_angle = Math.atan2(arrow_end_y - arrow_ctrl_y, arrow_end_x - arrow_ctrl_x);
        const arrow_size = 8;
        ctx.beginPath();
        ctx.moveTo(arrow_end_x, arrow_end_y);
        ctx.lineTo(arrow_end_x - arrow_size * Math.cos(tangent_angle - 0.4), arrow_end_y - arrow_size * Math.sin(tangent_angle - 0.4));
        ctx.moveTo(arrow_end_x, arrow_end_y);
        ctx.lineTo(arrow_end_x - arrow_size * Math.cos(tangent_angle + 0.4), arrow_end_y - arrow_size * Math.sin(tangent_angle + 0.4));
        ctx.stroke();

        // 8. Draw the caption
        ctx.font = '20px SimHei';
        ctx.textAlign = 'center';
        ctx.fillText('力图 2.2.1', cx, cy + 70);

    </script>
</body>
</html>